<template>
  <div class="dashboard-container">
    <div class="dashboard-content">
      <!-- 左侧主内容区 -->
      <div class="main-content">
        <ToolsModule :tools="tools" />
        <ResourcesModule
            :resources="filteredResources"
            :activeTab="activeTab"
            @update:activeTab="activeTab = $event"
            @open-resource="openResource"
        />
        <ClassModule
            :activities="filteredClassActivities"
            :activeTab="activeTabClassT"
            @update:activeTab="activeTabClassT = $event"
        />
        <CertificatesModule
            :certificates="filteredCertificates"
            :activeTabW="activeTabAward"
            @update:activeTabW="activeTabAward = $event"
        />
      </div>

      <!-- 右侧侧边栏 -->
      <div class="sidebar">
        <SidebarModule />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
import { useUserStore } from '@/store/modules/user';
import { getTeacherDashboard } from '@/api/teacher';
import ToolsModule from './components/ToolsModule.vue';
import ResourcesModule from './components/ResourcesModule.vue';
import ClassModule from './components/ClassModule.vue';
import CertificatesModule from './components/CertificatesModule.vue';
import SidebarModule from './components/SidebarModule.vue';

import {
  Clock,
  BellFilled,
  DocumentDelete,
  Calendar,
  FolderOpened,
  StarFilled,
  DocumentChecked,
  Operation,
  Trophy,
  School
} from '@element-plus/icons-vue'

const userStore = useUserStore();

// 默认 Tab 值：和组件的 label 保持一致
const activeTab = ref('class');            // 资源选项卡：'class' / 'subscription'
const activeTabAward = ref('published');   // 证书选项卡
const activeTabClassT = ref('reviewed'); // 活动选项卡：'participated' / 'reviewed'

// 固定工具部分
const tools = ref([
  { name: '打卡', icon: Clock },
  { name: '通知', icon: BellFilled },
  { name: '请假', icon: DocumentDelete },
  { name: '课程表', icon: Calendar },
  { name: '资源库', icon: FolderOpened },
  { name: '教师评价', icon: StarFilled },
  { name: '问卷调查', icon: DocumentChecked },
  { name: '活动管理', icon: Operation },
  { name: '成果管理', icon: Trophy },
  { name: '班级管理', icon: School }
]);

const resources = ref([]);
const classActivities = ref([]);
const certificates = ref([]);

// 过滤资源（映射 activeTab 到后端 category）
const filteredResources = computed(() => {
  // let backendCategory;
  // if (activeTab.value === 'class') backendCategory = 'mine';
  // else if (activeTab.value === 'subscription') backendCategory = 'all';
  // else backendCategory = activeTab.value;
  // console.log(resources.value.filter(r => r.category === activeTab.value))
  return resources.value.filter(r => r.category === activeTab.value);
});

// 过滤活动（映射 activeTabClassT 到后端 type）
const filteredClassActivities = computed(() => {
  let backendType;
  if (activeTabClassT.value === 'participated') backendType = 'mine';
  else if (activeTabClassT.value === 'reviewed') backendType = 'all';
  else backendType = activeTabClassT.value;
  return classActivities.value.filter(a => a.type === backendType);
});

// 过滤证书保持不动
const filteredCertificates = computed(() => {
  return certificates.value.filter(c => c.type === activeTabAward.value);
});

// 获取接口数据
const fetchDashboardData = async () => {
  try {
    const teacherId = userStore.userInfo?.id || localStorage.getItem('teacherId');
    if (!teacherId) {
      console.error('无法获取教师ID');
      return;
    }
    const response = await getTeacherDashboard(teacherId);
    resources.value = response.data.resources || [];
    classActivities.value = response.data.classActivities || [];
    certificates.value = response.data.certificates || [];
  } catch (error) {
    console.error('获取仪表盘数据失败:', error);
  }
};

onMounted(() => {
  fetchDashboardData();
});

const openResource = (resource) => {
  console.log(resource)
  console.log('打开资源:', resource.title);
};
</script>


<style scoped>
.dashboard-container {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
  height: calc(100vh - 40px);
}

.dashboard-content {
  display: flex;
  gap: 20px;
  min-height: 100%;
}

.main-content {
  flex: 3;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidebar {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.main-content, .sidebar {
  height: 100%;
}
</style>


